<!--   @author  Created By  YS  on 2023/10/21 -->
<!--   @describe -->

<template>
<div class="body">
  <div class="change-tips">
    <span class="change-tips-btn">资料完成80%</span>
    提供完整资料，可有效提升匹配成功率
  </div>
  <div class="nav-tab">
    <div @click="toggle('my')" :class="{'active':active =='my'}">我是</div>
    <div @click="toggle('find')" :class="{'active':active =='find'}">我找</div>
  </div>
<!--  我是-->
  <div class="change-content" v-if="active =='my'">
    <iAm></iAm>
<!--      <div class="flex-column">-->
<!--        <image :src="src" class="head-img"></image>-->
<!--        <div>-->
<!--          <u-cell-group :border="false">-->
<!--            <u-cell :border="false" title="昵称" :isLink="true" value="请选择" ></u-cell>-->
<!--            <u-cell  :border="false" title="签名" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="生日" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="身高" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="体重" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="性取向" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="角色" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="体型" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="工作所在地" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="故乡" :isLink="true" value="请选择"></u-cell>-->
<!--          </u-cell-group>-->
<!--          <div class="change-gap">经济情况</div>-->
<!--          <u-cell-group :border="false">-->
<!--            <u-cell :border="false" title="收入" :isLink="true" value="请选择" ></u-cell>-->
<!--            <u-cell  :border="false" title="购房情况" :isLink="true" value="请选择"></u-cell>-->
<!--            <u-cell  :border="false" title="购车情况" :isLink="true" value="请选择"></u-cell>-->
<!--          </u-cell-group >-->
<!--          <div class="change-gap">教育背景</div>-->
<!--          <u-cell-group :border="false">-->
<!--            <u-cell :border="false" title="学历" :isLink="true" value="请选择" ></u-cell>-->
<!--            <u-cell  :border="false" title="毕业院校" :isLink="true" value="请选择"></u-cell>-->
<!--          </u-cell-group >-->
<!--          <div class="change-gap">婚姻情况</div>-->
<!--          <u-cell-group :border="false">-->
<!--            <u-cell :border="false" title="婚况" :isLink="true" value="请选择" ></u-cell>-->
<!--            <u-cell  :border="false" title="是否有小孩" :isLink="true" value="请选择"></u-cell>-->
<!--          </u-cell-group>-->
<!--        </div>-->
<!--        <u-button  text="保存" :customStyle="customSty"></u-button>-->
<!--        </div>-->
  </div>
<!--  我找-->
  <div v-if="active == 'find'">
    <IFind></IFind>
  </div>
</div>
</template>

<script>
import iFind from "./components/iFind"
import iAm from "./components/iAm"
import Enums from "@/utils/enums";
import Enum from "@/utils/enums";
export default {
  name: 'changeInfo',
  components: {
    iFind,
    iAm
  },
  data() {
    return {
      src:require('../../assets/img/logo.png'),
      customStyles: {
        marginTop:'30rpx',
        marginBottom:'150rpx'
      },
      active: 'my'
    }
  },
  computed: {
    customSty(){
      // let obj = {}
      return Object.assign({},  Enum.customStyles,this.customStyles)
    }
  },
  methods: {
    toggle(type) {
      this.active = type
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../assets/css/base.scss';
.body{
  padding-bottom: 100rpx;
  background: #fff;
}
.change-tips{
  width: 750rpx;
  height: 88rpx;
  line-height: 88rpx;
  opacity: 1;
  background: #e8e3ff;
  color:#666666;
  font-size: 28rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  &-btn{
    display: inline-block;
    width: 192rpx;
    height: 47rpx;
    line-height: 47rpx;
    border-radius: 8rpx;
    opacity: 1;
    border: 0 solid #979797;
    background: #7355ff;
    color: #fff;
    font-size: 24rpx;
    text-align: center;
    margin-right: 30rpx;
    margin-left: 30rpx;
  }
}
.nav-tab{

  //border-bottom: 1rpx solid $u-border-color-base;
}
.nav-tab{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  flex-direction: row;
  border-bottom: 1px solid #bbb;
  color:#999;
  div{
    flex:1;
    text-align: center
  }
  .active{
    color: #333;
    //border-bottom: 2px solid #333;
  }
}

</style>
